<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./favicon.ico">
    <title>网易云音乐</title>
    <meta name="description" content="网易云音乐是一款专注于发现与分享的音乐产品，依托专业音乐人、DJ、好友推荐及社交功能，为用户打造全新的音乐生活。">
    <meta name="keywords" content="网易云音乐，音乐，播放器，网易，下载，播放，DJ，免费，明星，精选，歌单，识别音乐，收藏，分享音乐，音乐互动，高音质，320K，音乐社交，官网，music.163.com">
    <link rel="stylesheet" href="./css/init.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/body.css">
</head>
<body>
    <div class="top">
        <div class="nav">
            <div class="logo fl">
                <a href="https://music.163.com/" title="真@网易云音乐">网易云音乐</a>
            </div>
            <div class="nav_list fl">
                <ul>
                  <li>
                    <a href="#">发现音乐</a>
                    <span class="list_sub"></span>
                  </li>
                  <li>
                      <a href="#">我的音乐</a>
                      <span></span>
                 </li>
                  <li>
                      <a href="#">朋友</a>
                      <span></span>
                    </li>
                  <li>
                      <a href="#">商城</a>
                      <span></span>
                    </li>
                  <li>
                      <a href="#">音乐人</a>
                      <span></span>
                  </li>
                  <li>
                    <a href="#">下载客户端</a>
                    <span></span>
                    <sup class="list_sup">HOT</sup>
                  </li>
                </ul>
            </div>
            <div class="search fr">
                <div class="search_box fl">
                    <div class="enter fl">
                        <a href="#">搜索</a>
                    </div>
                    <input class="fl" type="text" placeholder="音乐/视频/电台/用户">
                </div>
                <div class="create fl">
                    <a href="#">创作者中心</a>
                </div>
                <div class="login fl">
                    <a href="#">登录</a>
                </div>
            </div>
        </div>
    </div>
    <div class="nav_2">
        <div class="nav_2_content">
            <ul>
                <li><a href="#" class="nav_2_active">推荐</a></li>
                <li><a href="#">排行榜</a></li>
                <li><a href="#">歌单</a></li>
                <li><a href="#">主播电台</a></li>
                <li><a href="#">歌手</a></li>
                <li><a href="#">新碟上架</a></li>
            </ul>
        </div>
    </div>
    <div class="body_content">
        <div class="mask" style="background-image: url(./upload/walk1_mask.jpg);"></div>
            <div class="banner">
                <div class="prev_img"></div>
                <div class="walk_img fl">
                    <a href="#">
                        <img id="ban_img" src="./upload/walk1_img.jpg" alt="">
                    </a>
                </div>
                <div class="download_clint fr">
                    <a href="#" class="dowmload_link">下载客户端</a>
                </div>
                <div class="next_img"></div>
            </div>
        <div class="data w">
            <div class="l_body">
                <div class="l_body_inner hot">
                    <div class="title">
                        <p class="r_p fl">热门推荐</p>
                        <div class="tab fl">
                            <a href="#">华语</a>
                            <span>|</span>
                            <a href="#">流行</a>
                            <span>|</span>
                            <a href="#">摇滚</a>
                            <span>|</span>
                            <a href="#">民谣</a>
                            <span>|</span>
                            <a href="#">电子</a>
                        </div>
                        <a href="#" class="more fr">
                            更多
                            <div class="r_logo fr"></div>
                        </a>
                    </div>
                    <ul>
                        <li>
                            <img src="./images/1.jpg" alt="">
                            <a href="#" class="img_mask">1</a>
                            <div class="btn">
                                <div class="l_btn fl"></div>
                                <p class="fl">498万</p>
                                <div class="r_btn fr"></div>
                            </div>
                            <a href="#" class="p_a">
                                冰镇软萌音｜不能自已的Kawaii电音
                            </a>
                        </li>
                        <li>
                            <img src="./images/2.jpg" alt="">
                            <a href="#" class="img_mask">1</a>
                            <div class="btn">
                                <div class="l_btn fl"></div>
                                <p class="fl">498万</p>
                                <div class="r_btn fr"></div>
                            </div>
                            <a href="#" class="p_a">
                                你那满目温柔再不属于我（Cover）
                            </a>
                        </li>
                        <li>
                            <img src="./images/3.jpg" alt="">
                            <a href="#" class="img_mask">1</a>
                            <div class="btn">
                                <div class="l_btn fl"></div>
                                <p class="fl">498万</p>
                                <div class="r_btn fr"></div>
                            </div>
                            <a href="#" class="p_a">
                                华语|原来你的夜晚也那么有故事
                            </a>
                        </li>
                        <li>
                            <img src="./images/4.jpg" alt="">
                            <a href="#" class="img_mask">1</a>
                            <div class="btn">
                                <div class="l_btn fl"></div>
                                <p class="fl">498万</p>
                                <div class="r_btn fr"></div>
                            </div>
                            <a href="#" class="p_a">
                                你费尽心思错过我 是为了遇见谁
                            </a>
                        </li>
                        <li>
                            <img src="./images/5.jpg" alt="">
                            <a href="#" class="img_mask">1</a>
                            <div class="btn">
                                <div class="l_btn fl"></div>
                                <p class="fl">498万</p>
                                <div class="r_btn fr"></div>
                            </div>
                            <a href="#" class="p_a">
                                翻唱｜我为你翻山越岭 却无心看风景
                            </a>
                        </li>
                        <li>
                            <img src="./images/6.jpg" alt="">
                            <a href="#" class="img_mask">1</a>
                            <div class="btn">
                                <div class="l_btn fl"></div>
                                <p class="fl">498万</p>
                                <div class="r_btn fr"></div>
                            </div>
                            <a href="#" class="p_a">
                                海鸟跟鱼相爱 只是一场意外
                            </a>
                        </li>
                        <li>
                            <img src="./images/7.jpg" alt="">
                            <a href="#" class="img_mask">1</a>
                            <div class="btn">
                                <div class="l_btn fl"></div>
                                <p class="fl">498万</p>
                                <div class="r_btn fr"></div>
                            </div>
                            <a href="#" class="p_a">
                                欧美精选| 温柔轻唱，散步兜风恰好时
                            </a>
                        </li>
                        <li>
                            <img src="./images/8.jpg" alt="">
                            <a href="#" class="img_mask">1</a>
                            <div class="btn">
                                <div class="l_btn fl"></div>
                                <p class="fl">498万</p>
                                <div class="r_btn fr"></div>
                            </div>
                            <a href="#" class="p_a">
                                云村编辑部给高考学子一封信
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="l_body_inner new">
                    <div class="title">
                        <p class="r_p fl">新碟上架</p>
                        <a href="#" class="more fr">
                            更多
                            <div class="r_logo fr"></div>
                        </a>
                    </div>
                    <div class="new_outer">
                        <a href=""></a>
                        <ul>
                            <li>
                                <div>
                                    <img src="./images/a.jpg" alt="">
                                    <a href="">1</a>
                                    <i class="player"></i>
                                </div>
                                <p><a href="">Windy</a></p>
                                <p><a href="">田小娟</a></p>
                            </li>
                            <li>
                                <div>
                                    <img src="./images/b.jpg" alt="">
                                    <a href="">1</a>
                                    <i class="player"></i>
                                </div>
                                <p><a href="">终点起点</a></p>
                                <p><a href="">鱼丁糸</a></p>
                            </li>
                            <li>
                                <div>
                                    <img src="./images/c.jpg" alt="">
                                    <a href="">1</a>
                                    <i class="player"></i>
                                </div>
                                <p><a href="">Planet Her</a></p>
                                <p><a href="">Doja Cat</a></p>
                            </li>
                            <li>
                                <div>
                                    <img src="./images/d.jpg" alt="">
                                    <a href="">1</a>
                                    <i class="player"></i>
                                </div>
                                <p><a href="">HAVE A NICE DAY</a></p>
                                <p><a href="">魏如萱</a></p>
                            </li>
                            <li>
                                <div>
                                    <img src="./images/e.jpg" alt="">
                                    <a href="">1</a>
                                    <i class="player"></i>
                                </div>
                                <p><a href="">White Stallion</a></p>
                                <p><a href="">Kaz</a></p>
                            </li>
                        </ul>
                        <a href=""></a>
                    </div>
                </div>
                <div class="l_body_inner ranking">
                    <div class="title">
                        <p class="r_p fl">榜单</p>
                        <a href="#" class="more fr">
                            更多
                            <div class="r_logo fr"></div>
                        </a>
                    </div>
                    <div class="music_list">
                        <dl class="dl_1"></dl>
                        <dl class="dl_2"></dl>
                        <dl class="dl_3"></dl>
                    </div>
                </div>
            </div>
            <div class="r_body">
                <div class="top_box">
                    <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
                    <a href="#">用户登录</a>
                </div>
                <div class="bottom_box">
                    <div class="singer">
                        <h3>
                            入驻歌手
                            <a href="#">查看全部 ></a>
                        </h3>
                        <ul>
                            <li>
                                <img src="./images/zhm.jpg" alt="">
                                <div class="text_div fr">
                                    <h4>张惠妹aMEZ</h4>
                                    <p>台湾歌手张惠妹</p>
                                </div>
                            </li>
                            <li>
                                <img src="./images/fine.jpg" alt="">
                                <div class="text_div fr">
                                    <h4>fine乐团</h4>
                                    <p>独立音乐人</p>
                                </div>
                            </li>
                            <li>
                                <img src="./images/wxl.jpg" alt="">
                                <div class="text_div fr">
                                    <h4>万晓利</h4>
                                    <p>民谣歌手、中国现代民谣的代表人物之一</p>
                                </div>
                            </li>
                            <li>
                                <img src="./images/zl.jpg" alt="">
                                <div class="text_div fr">
                                    <h4>赵雷</h4>
                                    <p>民谣歌手</p>
                                </div>
                            </li>
                            <li>
                                <img src="./images/zsb.jpg" alt="">
                                <div class="text_div fr">
                                    <h4>王三薄</h4>
                                    <p>音乐人</p>
                                </div>
                            </li>
                        </ul>
                        <div class="reg">申请成为网易音乐人</div>
                    </div>
                    <div class="verse">
                        <h3>热门主播</h3>
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="./images/9.jpg" alt="">
                                </a>
                                <div>
                                    <p><a href="#">陈立</a></p>
                                    <p>心理学家、美食家陈立教授</p>
                                </div>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./images/10.jpg" alt="">
                                </a>
                                <div>
                                    <p><a href="#">刘维-Julius</a></p>
                                    <p>歌手、播客节目《维维道来》主理人</p>
                                </div>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./images/11.jpg" alt="">
                                </a>
                                <div>
                                    <p><a href="#">莫非定律MoreFeel</a></p>
                                    <p>男女双人全创作独立乐团</p>
                                </div>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./images/12.jpg" alt="">
                                </a>
                                <div>
                                    <p><a href="#">碎嘴许美达</a></p>
                                    <p>脱口秀网络红人</p>
                                </div>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./images/13.jpg" alt="">
                                </a>
                                <div>
                                    <p><a href="#">银临Rachel</a></p>
                                    <p>古风音乐人</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footer_w">
            <div class="copy fl">
                服务条款| 隐私政策| 儿童隐私政策| 版权投诉指引| 意见反馈 | 广告合作<br>

                网易公司版权所有©1997-2021杭州乐读科技有限公司运营：浙网文[2021] 1186-054号<br>

                违法和不良信息举报电话：0571-89853516 举报邮箱：ncm5990@163.com<br>

                粤B2-20090191-18  工业和信息化部备案管理系统网站 <img src="./images/police.png" alt=""> 浙公网安备 33010902002564号<br>
            </div>
            <div class="r_part fr">
                <ul>
                    <li>
                        <a href="#">1</a>
                        <span></span>
                    </li>
                    <li>
                        <a href="#">2</a>
                        <span></span>
                    </li>
                    <li>
                        <a href="#">3</a>
                        <span></span>
                    </li>
                    <li>
                        <a href="#">4</a>
                        <span></span>
                    </li>
                    <li>
                        <a href="#">5</a>
                        <span></span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="control" style="bottom:0px;">
        <div class="container_fluid w">
            <div class="left_box fl">
                    <a title="上一曲" class="prev fl" onclick="prev_sing()">prev</a>
                    <a title="播放" class="play fl" onclick="audio.play()">play</a>
                    <a title="暂停" class="pause fl shoutdown" onclick="audio.pause()">pause</a>
                    <a title="下一曲" class="next fl" onclick="next_sing()">next</a>
                    <audio id="audio" src="" ontimeupdate="update()"></audio>
            </div>
            <div class="middle_box fl">
                <div class="head_img fl">
                    <img src="./images/name.jpg" alt="">
                    <a href="#">img</a>
                </div>
                <div class="message fl">
                    <a href="#" class="name fl"></a>
                    <a class="mv fl">mv</a>
                    <a href="#" class="author fl"></a>
                    <a class="link fl">link</a>
                    <div class="plan fl">
                        <div class="cur"></div>
                        <span class="sliding"></span>
                        <div class="time fl">00:00/00:00</div>
                    </div>
                </div>
            </div>
            <div class="right_box fl">
                <div class="fl func_l">
                    <a class="pip fl">pip</a>
                    <a class="collect fl">collect</a>
                    <a class="share fl">share</a>
                </div>
                <div class="fr func_r">
                    <a class="voice fl">voice</a>
                    <a class="circulation fl">circulation</a>
                    <a class="playlist fl">playlist</a>
                </div>
            </div>
        </div>
        <div class="zoom" style="bottom:0px;">
            <a class="clock"></a>
            <a class="unclock shoutdown"></a>
        </div>
    </div>
</body>
</html>
<script src="./js/music_list.js"></script>
<script src="./js/public.js"></script>
<script src="./js/interaction.js"></script>